- const seriesVisualProgress = [];
- let oldPercent = -1;
- let oldValue = -1;
each eachRow in browsertime.visualMetrics.VisualProgress
  - const newValue = eachRow.timestamp
  - const percent = eachRow.percent
  //- Sometimes VisualMetrics report the same percentage multiple times after each other
  // and since the original time is in ms we wanna remove entries on the same 0.1 s
  if percent !== oldPercent &&  newValue !== oldValue
    - oldPercent = percent
    - oldValue = newValue
    - seriesVisualProgress.push({x: newValue, y: percent})
script(type='text/javascript').
  document.addEventListener("DOMContentLoaded", function() {
      const visualProgressChart = new Chartist.Line('#ct-visualprogress', {
        series: [!{JSON.stringify(seriesVisualProgress)}],
        }, {
        showArea: true,
        showPoint: true,
        chartPadding: {
          top: 10,
          right: 0,
          bottom: 30,
          left: 10
        },
        axisX: {
          type: Chartist.AutoScaleAxis,
          onlyInteger: false,
        },
        lineSmooth: Chartist.Interpolation.step({
          postpone: true,
          fillHoles: false
        }),
        axisY: {
          onlyInteger: true
        },
        plugins: [
          Chartist.plugins.ctAxisTitle({
            axisX: {
              axisTitle: 'Time (seconds)',
              axisClass: 'ct-axis-title',
              offset: {
                x: 0,
                y: 50
              },
              textAnchor: 'middle'
            },
            axisY: {
              axisTitle: 'Visual progress %',
              axisClass: 'ct-axis-title',
              offset: {
                x: 0,
                y: -4
              },
              textAnchor: 'middle',
              flipTitle: false
            }
            }),
            Chartist.plugins.tooltip({
              transformTooltipTextFnc: function(text) {
                const m = text.split(',');
                return m[0] + 's ' + m[1] + '%';
              }
            })
          ]
        });
      });
